<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加旅客 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .form-header {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 20px 20px;
            position: relative;
            overflow: hidden;
        }
        
        .form-header::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .form-header::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .page-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: "›";
            color: rgba(255, 255, 255, 0.7);
        }
        
        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .breadcrumb-item a {
            color: white;
        }
        
        .form-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            margin-bottom: 2rem;
        }
        
        .form-control {
            border-radius: 10px;
            padding: 0.75rem 1rem;
            border: 1px solid #e0e0e0;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            box-shadow: 0 0 0 3px rgba(57, 73, 171, 0.2);
            border-color: #3949ab;
        }
        
        .input-group-text {
            border-radius: 10px 0 0 10px;
            background-color: #e8eaf6;
            border: 1px solid #e0e0e0;
            color: #3949ab;
        }
        
        .input-group .form-control {
            border-radius: 0 10px 10px 0;
        }
        
        .btn {
            border-radius: 10px;
            padding: 0.6rem 1.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            border: none;
            box-shadow: 0 4px 15px rgba(57, 73, 171, 0.3);
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #3949ab, #1a237e);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(57, 73, 171, 0.4);
        }
        
        .btn-secondary {
            background: #f5f5f5;
            color: #333;
            border: none;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        .btn-secondary:hover {
            background: #e0e0e0;
            color: #333;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        }
        
        .form-group label {
            font-weight: 500;
            color: #444;
            margin-bottom: 0.5rem;
        }
        
        @media (max-width: 767.98px) {
            .page-title {
                font-size: 2rem;
            }
            
            .form-buttons {
                display: flex;
                flex-direction: column;
            }
            
            .form-buttons .btn {
                margin-bottom: 0.5rem;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane-departure mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 d-none d-lg-flex">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="快速搜索" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>

    <div class="form-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="page-title animate__animated animate__fadeInUp">添加旅客</h1>
                    <nav aria-label="breadcrumb" class="animate__animated animate__fadeInUp animate__delay-1s">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/flightbooking/"><i class="fas fa-home"></i> 首页</a></li>
                            <li class="breadcrumb-item"><a href="/flightbooking/passengers"><i class="fas fa-users"></i> 旅客管理</a></li>
                            <li class="breadcrumb-item active" aria-current="page">添加旅客</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-6 text-right d-none d-md-block">
                    <img src="https://img.icons8.com/fluency/96/ffffff/add-user-male.png" class="animate__animated animate__fadeInRight animate__delay-1s" alt="添加旅客">
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-4">
        <div class="card form-card animate__animated animate__fadeInUp">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-user-plus mr-2"></i>添加旅客信息</h5>
            </div>
            <div class="card-body">
                <form action="/flightbooking/passengers/add" method="post" id="passengerForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name"><i class="fas fa-user mr-1"></i>姓名 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    </div>
                                    <input type="text" class="form-control" id="name" name="name" required 
                                           placeholder="请输入旅客姓名" data-toggle="tooltip" title="旅客姓名应与身份证一致">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="idCard"><i class="fas fa-id-card mr-1"></i>身份证号 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                                    </div>
                                    <input type="text" class="form-control" id="idCard" name="idCard" 
                                           pattern="[0-9Xx]{18}" title="请输入18位有效身份证号" required 
                                           placeholder="请输入18位身份证号">
                                </div>
                                <small class="form-text text-muted"><i class="fas fa-info-circle mr-1"></i>请输入18位有效身份证号</small>
                            </div>
                            <div class="form-group">
                                <label for="phone"><i class="fas fa-phone mr-1"></i>联系电话 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                    </div>
                                    <input type="tel" class="form-control" id="phone" name="phone" 
                                           pattern="[0-9]{11}" title="请输入11位手机号码" required 
                                           placeholder="请输入11位手机号码">
                                </div>
                                <small class="form-text text-muted"><i class="fas fa-info-circle mr-1"></i>请输入11位手机号码</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email"><i class="fas fa-envelope mr-1"></i>电子邮箱</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    </div>
                                    <input type="email" class="form-control" id="email" name="email" 
                                           placeholder="请输入电子邮箱地址">
                                </div>
                                <small class="form-text text-muted"><i class="fas fa-info-circle mr-1"></i>用于接收行程通知和电子票据</small>
                            </div>
                            <div class="form-group">
                                <label for="totalPurchase"><i class="fas fa-money-bill-wave mr-1"></i>历史购票金额</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">¥</span>
                                    </div>
                                    <input type="number" class="form-control" id="totalPurchase" name="totalPurchase" 
                                           min="0" step="0.01" value="0.00">
                                </div>
                                <small class="form-text text-muted"><i class="fas fa-info-circle mr-1"></i>初始值为0.00，会在购票后自动更新</small>
                            </div>
                            <div class="form-group">
                                <label for="vipDiscount"><i class="fas fa-percentage mr-1"></i>VIP折扣率</label>
                                <div class="input-group">
                                    <input type="number" class="form-control" id="vipDiscount" name="vipDiscount" 
                                           min="0.1" max="1" step="0.01" value="1.00">
                                    <div class="input-group-append">
                                        <span class="input-group-text">折</span>
                                    </div>
                                </div>
                                <small class="form-text text-muted"><i class="fas fa-info-circle mr-1"></i>初始值为1.00(无折扣)，会根据历史购票金额自动调整</small>
                            </div>
                        </div>
                    </div>
                    <div class="text-right mt-4 form-buttons">
                        <a href="/flightbooking/passengers" class="btn btn-secondary mr-2">
                            <i class="fas fa-times mr-1"></i> 取消
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save mr-1"></i> 保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center text-md-left mb-3 mb-md-0">
                    <h5><i class="fas fa-plane mr-2"></i>航空订票系统</h5>
                    <p class="mb-0">提供便捷、高效的航班预订服务</p>
                </div>
                <div class="col-md-4 text-center mb-3 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/flightbooking/flights" class="text-light"><i class="fas fa-angle-right mr-2"></i>航班查询</a></li>
                        <li><a href="/flightbooking/passengers" class="text-light"><i class="fas fa-angle-right mr-2"></i>旅客管理</a></li>
                        <li><a href="/flightbooking/tickets" class="text-light"><i class="fas fa-angle-right mr-2"></i>机票预订</a></li>
                    </ul>
                </div>
                <div class="col-md-4 text-center text-md-right">
                    <h5>联系我们</h5>
                    <p class="mb-0">客服热线: 400-123-4567</p>
                    <div class="mt-3">
                        <a href="#" class="text-light mr-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light mr-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fas fa-envelope fa-lg"></i></a>
                    </div>
                    <p class="mt-3 mb-0">© 2023 航空订票系统 - JZA04</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化工具提示
            $('[data-toggle="tooltip"]').tooltip();
            
            // 表单验证
            $('#passengerForm').on('submit', function(e) {
                let isValid = true;
                
                // 验证身份证号
                const idCard = $('#idCard').val().trim();
                if (idCard && !/^[0-9Xx]{18}$/.test(idCard)) {
                    isValid = false;
                    showError($('#idCard'), '请输入有效的18位身份证号');
                }
                
                // 验证手机号
                const phone = $('#phone').val().trim();
                if (phone && !/^[0-9]{11}$/.test(phone)) {
                    isValid = false;
                    showError($('#phone'), '请输入有效的11位手机号码');
                }
                
                // 验证邮箱格式（如果填写了）
                const email = $('#email').val().trim();
                if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    isValid = false;
                    showError($('#email'), '请输入有效的电子邮箱地址');
                }
                
                if (!isValid) {
                    e.preventDefault();
                    return false;
                }
                
                // 表单提交时添加加载状态
                if (isValid) {
                    const submitBtn = $(this).find('button[type="submit"]');
                    submitBtn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...');
                    submitBtn.prop('disabled', true);
                }
            });
            
            // 显示错误信息
            function showError(element, message) {
                element.addClass('is-invalid');
                
                // 如果错误信息已存在则不重复添加
                if (element.next('.invalid-feedback').length === 0) {
                    // 创建错误提示
                    const feedback = $('<div class="invalid-feedback"></div>').text(message);
                    element.after(feedback);
                }
                
                // 聚焦到错误输入框
                element.focus();
            }
            
            // 输入时移除错误状态
            $('form input').on('input', function() {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback').remove();
            });
        });
    </script>
</body>
</html> 